import React, { forwardRef, useRef, useState, useEffect } from 'react';
import * as ComboboxPrimitive from '@radix-ui/react-combobox';
import { ChevronDown } from 'lucide-react';

// Combobox组件
const Combobox = ComboboxPrimitive.Root;

// ComboboxInput组件
const ComboboxInput = forwardRef<HTMLInputElement, ComboboxPrimitive.ComboboxInputProps>(({ className, ...props }, ref) => {
  return (
    <ComboboxPrimitive.Input
      ref={ref}
      className={`flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
      {...props}
    />
  );
});

// ComboboxTrigger组件
const ComboboxTrigger = forwardRef<HTMLButtonElement, ComboboxPrimitive.ComboboxTriggerProps>(({ className, ...props }, ref) => {
  return (
    <ComboboxPrimitive.Trigger
      ref={ref}
      className={`flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
      {...props}
    >
      <span className="truncate">{props.children}</span>
      <ChevronDown className="h-4 w-4 text-muted-foreground" />
    </ComboboxPrimitive.Trigger>
  );
});

// ComboboxContent组件
const ComboboxContent = forwardRef<HTMLDivElement, ComboboxPrimitive.ComboboxContentProps>(({ className, ...props }, ref) => {
  return (
    <ComboboxPrimitive.Content
      ref={ref}
      className={`relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${className}`}
      {...props}
    />
  );
});

// ComboboxItem组件
const ComboboxItem = forwardRef<HTMLElement, ComboboxPrimitive.ComboboxItemProps>(({ className, ...props }, ref) => {
  return (
    <ComboboxPrimitive.Item
      ref={ref}
      className={`relative flex w-full cursor-pointer select-none items-center rounded-md px-3 py-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${className}`}
      {...props}
    >
      <ComboboxPrimitive.ItemText />
      <ComboboxPrimitive.ItemIndicator className="absolute right-3 flex h-4 w-4 items-center justify-center text-primary">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <path d="M11.6666 3.33325L5.66656 9.33325L2.33325 6.00004" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </ComboboxPrimitive.ItemIndicator>
    </ComboboxPrimitive.Item>
  );
});

// ComboboxValue组件
const ComboboxValue = forwardRef<HTMLDivElement, ComboboxPrimitive.ComboboxValueProps>(({ className, ...props }, ref) => {
  return (
    <ComboboxPrimitive.Value
      ref={ref}
      className={className}
      {...props}
    />
  );
});

// 导出所有组件
export {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxTrigger,
  ComboboxValue,
};